/* `vw + rem + em + media query` 响应式布局*/

html {
  font-size: 1vw; /* 1vw 代表当前视口宽度的百分之一 */
}

/* 分割点 */

/* iphone 5 */
@media screen and (min-width: 320px) {
  body {
    font-size: 14px;
  }
}
/* iphoneX */
@media screen and (min-width: 375px) {
  body {
    font-size: 16px;
  }
}
/* iphone6 7 8 plus */
@media screen and (min-width: 414px) {
  body {
    font-size: 18px;
  }
}
/* ipad */
@media screen and (min-width: 768px) {
  body {
    font-size: 20px;
  }
}
/* ipad pro */
@media screen and (min-width: 1024px) {
  body {
    font-size: 24px;
  }
}